{% if stats_calculated %}
  {% if content %}
    {% if progress %}
      <style type="text/css">
        .chart-container {
          margin: 0 0 20px 0;
        }
      </style>

      <script type="text/javascript" src="//www.google.com/jsapi"></script>
      <script src="assets/lib/jquery-1.7.2.min.js"></script>
      <script type="text/javascript">
        google.load('visualization', '1', {packages: ['corechart']});
        google.setOnLoadCallback(drawVisualization);
        var content = JSON.parse("{{content | js_string}}");
        var progress = JSON.parse("{{progress | js_string}}");
        var entityCodes = JSON.parse("{{entity_codes | js_string}}");
        function drawVisualization() {
          // Create and populate the data table.
          var table = new google.visualization.DataTable();
          table.addColumn('string', 'Students');
          table.addColumn('number', 'Completed');
          table.addColumn('number', 'In Progress');
          var rows = []
          // TODO(juliaoh): Generalize this function to take in user queries.
          for (var entity in content) {
            if ($.inArray(entity, entityCodes) != -1) {
              for (var unit in content[entity]) {
                var key = entity + '.' + unit;
                var label = content[entity][unit]['label'].toString();
                if (key in progress) {
                  rows.push(
                  [label, progress[key].completed, progress[key].progress]);
                } else {
                  rows.push([label, 0, 0]);
                }
              }
            }
          }
          table.addRows(rows);

          // Create and draw the visualization.
          new google.visualization.ColumnChart(document.getElementById('visualization')).
          draw(table,
               {title: "Student Progress for Units & Assessments",
                isStacked: true,
                width: 800, height: 400,
                vAxis: {title: "Students"},
                hAxis: {title: "Units & Assessments"},
              }
              );
        }
        </script>

        <h3>Student Progress Statistics</h3>
        <div id="visualization" class="chart-container"></div>

      {% else %}
        <h3>Student Progress Statistics</h3>
        <p>No student progress has been recorded for this course.</p>
      {% endif %}
   {% endif %}
{% endif %}

{% if errors %}
  <h3>Student Progress Statistics -- Errors</h3>
  <ul>
    {% for error in errors %}
      <li>{{ error }}</li>
    {% endfor %}
  </ul>
{% endif %}

{{ update_message }}

{% if stats_calculated %}
  <p>
    <strong>Important:</strong> In order for all student progress to be recorded
    <strong>gcb_can_persist_activity_events</strong>,
    <strong>gcb_can_persist_page_events</strong>, and
    <strong>gcb_can_persist_tag_events</strong> should be enabled on the
    Admin > Settings page.
  </p>
{% endif %}

<br><br>
